<template>
	<div class="side-select">
		<div class="side-item" :class="[{ active: active === index }]" v-for="(item, index) in list" :key="index" @click="changeSelect(item, index)">
			<i class="line"></i>
			{{ item.mainName }}
		</div>
		<van-skeleton :row="15" :loading="loading"></van-skeleton>
	</div>
</template>

<script>
import { Skeleton } from 'vant';
export default {
	name: 'TreeSelect',
	components: {
		'van-skeleton': Skeleton
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		},
		loading: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			active: 0
		};
	},
	created() {},
	methods: {
		// 切换选中
		changeSelect(item, index) {
			this.active = index;
			this.$emit('refresh', { cid: item.cid });
			// 百度推送
			let activeItem = this.list.filter(items => items.cid == item.cid);
			if (activeItem[0]) {
				this.$baiduPush('分类点击事件', 'tap', activeItem[0].mainName);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.side-select {
	height: 100%;
	width: 202px;
	overflow: auto;
	padding-right: 20px;
	background: $color-white;
	.side-item {
		line-height: 108px;
		font-size: 28px;
		color: #57575d;
		text-align: center;
		position: relative;
		transition: 0.8s;
		border-bottom: 2px solid #edeeef;
		background: $bg-grey-second;
		.line {
			opacity: 0;
			background: $main-color;
			height: 82px;
			width: 8px;
			border-radius: 50px;
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -41px;
			transition: 0.3s;
		}
		&.active {
			border-color: $main-color;
			background: $bg-white;
			border-bottom: 2px solid #f6f6f6;
			.line {
				opacity: 1;
			}
		}
	}
	/deep/.van-skeleton {
		padding: 0;
		.van-skeleton__content {
			padding: 0;
			background-color: #f2f3f5;
			.van-skeleton__row {
				margin: 40px auto;
				max-width: 114px;
				border-radius: 8px;
				height: 68px;
				background-color: white !important;
			}
		}
	}
}
</style>
